<template>
  <div>
    <ElCard class="box-card">
    <ElForm :inline="true" :model="formInline" class="demo-form-inline">
      <ElFormItem label="一级分类">
        <ElSelect v-model="category1Id" placeholder="请选择" :disabled="!disabledSelector"  @change="test">
          <ElOption
            v-for="c1 in category1List"
            :key="c1.id"
            :label="c1.name"
            :value="c1.id"
          />
        </ElSelect>
      </ElFormItem>
      <ElFormItem label="二级分类">
        <ElSelect v-model="category2Id" placeholder="请选择" :disabled="!disabledSelector" @change="test2" >
          <ElOption
            v-for="c2 in category2List"
            :key="c2.id"
            :label="c2.name"
            :value="c2.id"
          />
        </ElSelect>
      </ElFormItem>
      <ElFormItem label="三级分类">
        <ElSelect v-model="category3Id" @change="receiveID3" :disabled="!disabledSelector" placeholder="请选择">
          <ElOption
            v-for="c3 in category3List"
            :key="c3.id"
            :label="c3.name"
            :value="c3.id"
          />
          
        </ElSelect>
      </ElFormItem>
    </ElForm>
  </ElCard>
  </div>

</template>

<script lang="ts">
export default {
  name: "CategorySelector",
};
</script>

<script setup lang="ts">
import { reactive, onMounted, computed, ref, } from "vue";
import {
  reqGetCategory1ListData,
  reqGetCategory2ListData,
  reqGetCategory3ListData,
} from "@/api/product/category";
import type { CategorySelectModel } from "@/api/product/model/categorySelect";

//定义复杂数据类型reactive
defineProps(['disabledSelector'])
const formInline = reactive({
  user: "",
  region: "",
});
//约束数据类型
// interface T {
//   id: number,
//   name: string
// }
// type D = T[]

const category1Id=ref('')
const category2Id=ref('')
let category3Id=ref('')

const category1List = ref<CategorySelectModel>([]);
const test = async (val: number) => {
 
  //重新点击一级后，三级数据要清空，二三级ID也要清空
  category2Id.value = ''
  category3Id.value = ''
  category3List.value = []
  category2List.value = await reqGetCategory2ListData(val);
};
const test2 = async (val2: number) => {
  
  category3List.value = await reqGetCategory3ListData(val2);
};


const category2List = ref<categorySelectModel>([]);

const category3List = ref<categorySelectModel>([]);

//页面挂载发送请求
onMounted(async () => {
  category1List.value = await reqGetCategory1ListData();
  console.log(category1List);
  // console.log("[hmz]", formInline.res);
  // categoryStore.reqGetCategory1ListData()

});

const onSubmit = () => {
  console.log("submit!");
};
//子传父三级id
const emit = defineEmits<{
  (e: 'category3ID', id: any): void
  
}>()
const receiveID3 = ( )=>{
  emit('category3ID',{category1Id,category2Id,category3Id})
}

</script>

<style></style>
